<template>
	<view class="reward-history-item" @click="jump">
		<goodsOrderItem :topText="detail.open_time"
			:statusLabel="global.deviceActivateStatusList[detail.activate_type].name"
			:statusColor="global.deviceActivateStatusList[detail.activate_type].color"
			:statusBgcolor="global.deviceActivateStatusList[detail.activate_type].bgColor"
			:goodsName="detail.machine_name" :goodsDesc="detail.dec" :goodsImage="detail.product_images">
			<template v-slot:info-bottom>
				<view class="reward-info-bottom">
					<view class="reward-amount">
						<text class="label">激活奖励：</text> {{detail.earnings_amount}}元
					</view>
					<!-- <view class="reward-income">
						<text class="label">分润收益：</text>{{detail.earnings_ratio}}元/每万元
					</view> -->
				</view>
			</template>
			<template v-slot:footer>
				<view class="reward-history-item-footer">
					所属代理:{{detail.agent_info}}
				</view>
			</template>
		</goodsOrderItem>
	</view>
</template>

<script lang="ts" setup>
	import global from '@/global';
	import { ACTIVATE_STATUS } from '@/enum/device';
	import goodsOrderItem from '@/components/goods_order_item/goodsOrderItem';
	import { IDeviceItem } from '@/types/device';
	import { defineProps } from 'vue';

	interface IProps {
		detail : IDeviceItem,
	}

	const props = withDefaults(defineProps<IProps>(), {
		detail: () => {
			return {
				open_time: '',
				product_images: '',
				machine_name: '',
				dec: '',
				id: 0,
				uid: 0,
				model_sn: '',
				activate_type: ACTIVATE_STATUS.ACTIVATED,
				earnings_amount: '',
				earnings_ratio: '',
				agent_info:'',
			}
		},
	});

	const jump = () => {
		uni.router.route({
			url: '/pages_reward/device_detail/deviceDetail',
			params:{
				model_sn: props.detail.model_sn,
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./rewardHistoryItem.scss";
</style>